<template>
	<view style="flex-direction: column; flex: 1;">

		<block v-for="(item,index) in productList" :key="index">

			<view class="">
				<view style="flex-direction: column; flex: 1;">
					<view style="height: 750upx;">
						<image :src="item.img" mode="" style="width: 100%; height: 100%;"></image>
					</view>
					<view style="padding-top: 30upx; padding-left: 20upx; padding-right: 20upx; font-size: 30upx; font-weight: bold;">
						{{item.title}}</view>
					<view style="padding: 20upx;">
						<view>
							<view>
								¥{{item.price}}
							</view>
							<view style="padding-left: 20upx;">
								{{item.seller_count}}
							</view>
						</view>
						<view style="flex: 1; justify-content: flex-end;">
							<view>
								<button type="warn" size="mini">购买</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="background-color: #8F8F94; height: 20upx;"></view>
		</block>
	</view>
</template>

<script>
	var self;
	import service from 'service/store.js';
	export default {
		data: {
			productList: []
		},
		async onLoad() {
			self = this;
			this.productList = await service.getProducts(1);
		}
	}
</script>

<style>
	view {

		/* 			margin: 10upx;
		border: #8F8F94 solid 1upx; */

		display: flex;
		flex-direction: row;

		font-size: 28upx;
	}
</style>
